import { PageHeader, Button } from 'antd';
import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/lib/codemirror.js';
import 'codemirror/theme/monokai.css'
import 'codemirror/mode/clike/clike.js'
import 'codemirror/keymap/sublime'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/show-hint.css'
import { transfer } from '../../../modules/trans'
import { useState } from 'react';
import { selectMock, getMockData } from '../vo/request';
import { useEffect } from "react";
import { Select } from "antd";


const Mock = () => {
    const [list, setList] = useState([
        {
            apiId: 0,
            apiName: '',
        }
    ])
    const [array, setArray] = useState([
        {
            lv: 1,
            must: true,
            name: 'code',
            value: "0",
            type: 'number',
            note: '',

        }
    ] as any[]);

    const [state, setState] = useState(0);
    const { Option } = Select;
    
    const send = (e: any) => {
        if (state === 0) {
            return;
        }
        console.log(e);
        console.log(e.doc.children[0].lines[0].text);
    }
    var val = sessionStorage.getItem("project");
    useEffect(() => {
        (async () => {
            if (!val) { return };
            let res = await selectMock(parseInt(val));
            res.data.map((item: any, index: number) => {
                setList(item.apis);
            })
        })()
    }, []);

    const query = async (value: any) => {
        let result = await getMockData(value);
        console.log(result);
        setArray(result.data.responseBody.nodes);   
    }
    return (
        <div>
            <PageHeader
                title="Mock测试"
            />
            <Select defaultValue="--请选择接口--" onChange={query}>
                {
                    list.map((item: any, index: number) => {
                        return <Option key={index} value={item.apiId}> {item.apiName} </Option>
                    })
                }
            </Select>

            <div  style={{ width: "100%", height: "550px" }}>
                <CodeMirror
                    value={transfer(array)}
                    onBlur={(e: any) => { send(e) }}
                    options={{
                        theme: 'monokai',
                        mode: 'JavaScript',
                        indentUnit: 4,
                    }}
                />
                <Button
                    onClick={() => setState(1)}
                >
                    生成数据
                </Button>
            </div>

        </div>
    );
}
export default Mock;
